<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background-color: black;
        }

        .box {
            width: 630px;
            height: 392px;
            padding: 0 0 10px 10px;
            border: 1px solid #fff;
            margin: 100px auto;
        }

        .box .item {
            float: left;
            width: 200px;
            height: 186px;
            padding: 10px 10px 0 0;
            background-repeat: no-repeat;
            background-position: center;
            background-origin: content-box;
            opacity: 1;
        }

        .box .item.active{
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <ul class="box">
        <!-- <li class="item" style="background-image: url(images/01.jpg);"></li>
        <li class="item" style="background-image: url(images/01.jpg);"></li>
        <li class="item" style="background-image: url(images/01.jpg);"></li>
        <li class="item" style="background-image: url(images/01.jpg);"></li>
        <li class="item" style="background-image: url(images/01.jpg);"></li>
        <li class="item" style="background-image: url(images/01.jpg);"></li> -->
        <!-- 这一部分动态生成 -->
    </ul>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
        var imgArr = ['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg','06.jpg']
        initItem($('ul'),imgArr);
        $('.item').mouseenter(function(){
            // 进入的元素  透明度 为 1,其他元素 透明度 为 0.4
            // 给自己 不加 active ,  给自己的所有兄弟 加 active
            // 问题来了 怎么拿到 自己(当前进入的li    其实就是this)

            console.log(this); // this  是一个原生 dom 对象

            // $(this)  包装成jq 对象,即可以 使用jq 语法
            $(this).removeClass('active');
            $(this).siblings().addClass('active');

        });
        // 离开事件绑给谁? 
        $('.box').mouseleave(function(){
            $('.box').children().removeClass('active')
        });

        

        function initItem($el,arr){
            var str = '';
            for(var i = 0;i<arr.length;i++){
                str+='<li class="item" style="background-image: url(images/'+arr[i]+');"></li>'
            }
            $el.html(str);
        }
    </script>
</body>

</html>